<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>魅族</title>
    <link rel="shortcut icon" href="../favicon-90c2e618ff.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/pc_common.css">
    <link rel="stylesheet" href="../css/login.css">
    <script src="../js/jquery-1.10.1.min.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/api.js"></script>
    <script src="../js/cookie.js"></script>

</head>

<body>
    <!-- ************** 头部内容区 start ************** -->
    <div class="MZ_header">
        <div class="header">
            <a href="../html/index1.html" >
                <div class="log"></div>
            </a>
        </div>
    </div>
    <!-- ************** 头部内容区 end ************** -->


    <!-- ************** 中部内容区 start ************** -->
    <div class="MZ_middle">
        <div class="middle">
            <div class="boss clear">
                <div class="tab-title">
                    <a class="aa" href="javascript:;">账号登录</a>
                    <span></span>
                    <a class="bb" href="javascript:;">二维码登录</a>
                    <img class="phone" src="../images/phone.png" alt="">
                    <img class="pc" src="../images/pc.png" alt="">
                </div>
                <div class="formbox">
                    <form class="form " onsubmit="return false" autocomplete="on">
                        <p>
                            <label>账&emsp;号:
                                <input class="user" type="text" placeholder="用户名/手机号">
                            </label>
                            <!-- <span class="user_span"></span> -->
                        </p>
                        <p>
                            <label>密&emsp;码:
                                <input class="pwd" type="password" placeholder="请输入密码">
                            </label>
                            <!-- <span class="pwd_span"></span> -->
                        </p>

                        <p>
                            <label class="msg">
                                <input type="checkbox" class="isRem">记住登录状态
                            </label>
                        </p>
                        <div class="btn">
                            登录
                        </div>
                    </form>
                </div>
                <!-- 二维码 -->
                <div class="imgbox">
                    <img src="../images/mzQrShow.jpg" alt="">
                </div>
                <div class="link">
                    <a href="../html/register.html">注册</a>
                    <a href="javascript:;">忘记密码</a>
                </div>
            </div>
        </div>
    </div>
    <!-- ************** 中部内容区 end ************** -->


    <!-- ************** 尾部内容区 start ************** -->
    <div class="MZ_footer">
        <div class="footer">
            <div class="top">
                <ul>
                    <li>
                        <a href="javascript:;">关于魅族</a>
                    </li>
                    <li>
                        <a href="javascript:;">工作机会</a>
                    </li>
                    <li>
                        <a href="javascript:;">联系我们</a>
                    </li>
                    <li>
                        <a href="javascript:;">法律声明</a>
                    </li>
                    <li>
                        <a href="javascript:;">常见问题</a>
                    </li>
                    <li>
                        <a href="javascript:;">简体中文</a>
                    </li>
                </ul>
                <div class="phone">
                    <span>客服热线</span>
                    <span>400-788-3333</span>
                </div>
                <div class="sbox">
                    在线客服
                </div>

                <div class="icon">
                    <a href="https://weibo.com/meizumobile">
                        <span class="i1"></span>
                    </a>

                    <div class="ibox">
                        <span class="i2"></span>
                        <div class="QR">
                            <img src="../images/QR.jpg" alt="">
                        </div>
                    </div>

                    <a href="https://user.qzone.qq.com/2762957059">
                        <span class="i3"></span>
                    </a>
                </div>

            </div>
            <div class="bottom">
                <p>©2021 Meizu Telecom Equipment Co., Ltd. All rights reserved.备案号: 粤ICP备13003602号-4经营许可证编号:
                    粤B2-20130198营业执照</p>
            </div>
        </div>
    </div>
    <!-- ************** 尾部内容区 end ************** -->


</body>

<script>
    //点击跳转主页面
    $(".btn").click(function () {
        var account = $(".user").val().trim();
        var pwd = $(".pwd").val().trim();
        if (account && pwd) {
            loginAccounnt({
                account,
                pwd
            }).then((result) => {
                var {
                    status,
                    user,
                    detail
                } = result;
                if (status) {
                    if ($(".isRem").is(":checked")) {
                        setCookie("lgc", user, 31);
                    } else {
                        setCookie("lgc", user);
                    }
                    // 跳转之前判断是否存在ReturnUrl
                    var search = location.search;
                    var returnUrl = search.split("=")[1];
                    if (returnUrl) {  //从其他页面跳转回来的 =>跳回去
                        location.href = decodeURIComponent(returnUrl);
                    } else {  // 没有  直接进入主页面
                        alert("Welcome to the world of Meizu")
                    location.href = "index1.html";
                    }
                   
                } else {
                    alert(detail)
                }
            })
        } else {
            alert("登录失败")
        }
    })

    //登录切换 事件委托
    $(".tab-title").on("click",".phone",function(){
        $(".phone").hide();
        $(".pc").show();
        $(".formbox").css({
            display: "none"
        });
        $(".imgbox").css({
            display: "block"
        });
    }).on("click",".pc",function(){
        $(".pc").hide();
        $(".phone").show();
        $(".imgbox").css({
            display: "none"
        })
        $(".formbox").css({
            display: "block"
        })
    }).on("click",".bb",function(){
        $(".formbox").css({
            display: "none"
        });
        $(".imgbox").css({
            display: "block"
        });
    }).on("click",".aa",function(){
        $(".imgbox").css({
            display: "none"
        });
        $(".formbox").css({
            display: "block"
        });
    })

</script>

</html>